<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
   v-model其实是一个语法糖，它的背后本质是包含两个操作：
       1.v-bind绑定一个value属性
       2.v-on指令给当前元素绑定input事件
-->
<div id="app">
  <!--input有一个input事件，用来监听用户有无输入文本框-->
  <input type="text" v-bind:value="message" v-on:input="valueChange">
  {{message}}<br>
  <!-- 第二种方法 -->
  <input type="text" :value="age" @input="age = $event.target.value">
  {{age}}<br>
  <input type="text" v-model="name">
  {{name}}<br>
 
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好',
      name:'阿絮',
      age:30
    },
    methods:{
      valueChange(event){
        /*event.target.value:用于获取输入框里输入的value
        * target事件属性：可返回事件的目标节点
        * */
        this.message=event.target.value;  //event.target 返回input元素
      }
    }
  })
  

</script>
</body>
</html>